<template>
  <el-breadcrumb :separator-icon="ArrowRight">
   <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item :to="{ path: '/index/manager' }">用户信息</el-breadcrumb-item>
   <el-breadcrumb-item>添加用户</el-breadcrumb-item> 
 </el-breadcrumb>
 <el-form
   :label-position="labelPosition"
   label-width="100px"
   :rules="rules"
   :model="formLabelAlign"
   style="max-width: 460px"
 >
   <el-form-item label="姓名"
     prop="name" :rules="[
       {required:true,message:'请输入你的名字',trigger:'blur'},
       {min:2,max:5,message:'名字长度在2位到5位',trigger:'blur'},
       {type:'string',message:'请输入正确格式的名字',tigger:'blur'}
     ]">
     <el-input v-model="formLabelAlign.name" />
   </el-form-item>
   <el-form-item label="电话"
     prop="phone" :rules="[
       {required:true,message:'请输入你的手机号',trigger:'blur'},
       {min:11,message:'手机号长度有误',tigger:'blur'}

     ]">
     <el-input v-model="formLabelAlign.phone" />
   </el-form-item>
   <el-form-item label="邮箱" 
     prop="email" :rules="[
       {type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
     ]">
     <el-input v-model="formLabelAlign.email" />
   </el-form-item>
   <el-form-item label="用户状态">
     <el-radio-group v-model="formLabelAlign.status" class="ml-4">
     <el-radio label="true" size="large">会员</el-radio>
     <el-radio label="false" size="large">非会员</el-radio>
   </el-radio-group>
   </el-form-item>
   
   <el-popconfirm   
   confirm-button-text="Yes"
   cancel-button-text="No"
   :icon="InfoFilled"
   icon-color="#626AEF"
   title="确定要添加用户信息吗？"
   @confirm="confirmEvent"
   @cancel="cancelEvent">
   <template #reference>
     <el-button type="primary" plain >提交</el-button>
   </template>
 </el-popconfirm>
 <el-button :plain="true" @click="cancel">取消</el-button>
 </el-form>
 
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { InfoFilled,ArrowRight } from '@element-plus/icons-vue'
import {useRoute , useRouter} from 'vue-router'
import { h } from 'vue'
import {user_add} from '../../utils/api'
const router = useRouter()
const labelPosition = ref('right')
const formLabelAlign = ref({
 name: '',
 phone: '',
 email: '',
 status:false
})
// var tableData = ref({list:[]})
// onMounted(()=>{
//   axios.get('/api/user/list').then((res)=>{
//   tableData.value.list = res.data.list;

// })

// })
// var pushlist=()=>{
//   axios.post('api/user/add',{ name:formLabelAlign.value.name,phone:formLabelAlign.value.phone,email:formLabelAlign.value.email,status:formLabelAlign.value.status,rolename:"普通用户" }).then(
//     (res)=>{
//       console.log(res.data.list);  
//     }
//   )
// }
const confirmEvent = () => {
 if(formLabelAlign.value.name != '' && formLabelAlign.value.email != '' && formLabelAlign.value.phone != ''){
  user_add({ name:formLabelAlign.value.name,phone:formLabelAlign.value.phone,email:formLabelAlign.value.email,status:formLabelAlign.value.status,rolename:"普通用户" }).then(
   (res)=>{
     console.log(res.data.list);  
   })
   ElMessage({
   message: '用户添加成功',
   grouping: true,
   type: 'success',
 })
   router.push('/index/manager')
 }
}
const cancelEvent = () => {
 ElMessage({
   message: '新建用户已取消',
   grouping: true,
   type: 'success',
 })
 
}
const cancel = () => {
 ElMessage({
   message: '新建用户已取消',
   grouping: true,
   type: 'success',
 })
 formLabelAlign.value = ''
}
</script>

<style lang="scss" scoped>
.el-form{
 margin-top: 30px;
}
.el-button{
 margin-left: 100px;
}
.el-message-box__status {
 position: absolute !important;
}
</style>